<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>质量追溯</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="/product/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="/product/css/animate.min.css" rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link href="/product/css/light-bootstrap-dashboard.css" rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="/product/css/demo.css" rel="stylesheet" />
    <link href="/product/css/matrix-style.css" rel="stylesheet" />
    <link href="/product/css/suYuan.css" rel="stylesheet" />


    <!--     Fonts and icons     -->
    <link  href="/product/css/fonts.googleapis.com.css" rel="stylesheet">
    <!-- <link href="css/font-awesome.min.css" rel="stylesheet">-->
    <link href="/product/css/pe-icon-7-stroke.css" rel="stylesheet" />


</head>
<body>

<div class="wrapper">
    <!--侧导航-->
    <#include '/common/daohang.html' />
    <!--内容区域-->

    <div class="main-panel">
        <nav class="navbar navbar-default navbar-fixed">
            <div class="container-fluid">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">溯源信息</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="/Traceability/suYuan/${code !''}/${id !''}/suYuan">
                                质量追溯首页
                            </a>
                        </li>
                        <li>
                            <a href="/index.html">
                                退出
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--更换的区域-->

        <div class="content">
            <div class="container-fluid">
                <div class="widget-box">
                    <div class="widget-title">
                        <ul class="nav nav-tabs" id="menubar">
                           <!-- <li class="active" class=""><a data-toggle="tab" href="#tab1">育种</a></li>
                            <li class=""><a data-toggle="tab" href="#tab2">种植</a></li>
                            <li ><a data-toggle="tab" href="#tab3">仓储</a></li>
                            <li class=""><a data-toggle="tab" href="#tab4">加工</a></li>
                            <li ><a data-toggle="tab" href="#tab5">销售</a></li>-->
                        </ul>
                    </div>
                    <div class="widget-content tab-content" id="contentelement">
                        <!--<div id="tab1" class="tab-pane active clearfix">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">育种</h4>
                                </div>
                                <div class="content table-responsive table-full-width">
                                    <div class="list_box">
                                        <div class=list_box_title">
                                            <table class="table table-hover table-striped">
                                                <thead>
                                                <tr>
                                                    <th>育种时间</th>
                                                    <th>育种负责人</th>
                                                </tr></thead>
                                                <tbody>
                                                <tr>
                                                    <td>2017-05-05 14:16:14</td>
                                                    <td>鲁昆齐</td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="list_box_down">
                                            <div class="image-list">
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>


                                            </div>

                                        </div>
                                    </div>

                                </div>

                            </div>





                        </div>
                        <div id="tab2" class="tab-pane">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">种植过程</h4>

                                </div>
                                <div class="content table-responsive table-full-width">
                                    <div class="list_box">
                                        <h1 class="h1_style">育种:</h1>
                                        <div class=list_box_title">

                                            <table class="table table-hover table-striped">
                                                <thead>
                                                <tr>
                                                    <th>插秧时间</th>
                                                    <th>插秧负责人</th>
                                                </tr></thead>
                                                <tbody>
                                                <tr>
                                                    <td>2017-05-05 14:16:14</td>
                                                    <td>鲁昆齐</td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="list_box_down">
                                            <div class="image-list">
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>


                                            </div>

                                        </div>
                                    </div>
                                    <div class="list_box">
                                        <h1 class="h1_style">育种:</h1>
                                        <div class=list_box_title">
                                            <table class="table table-hover table-striped">
                                                <thead>
                                                <tr>
                                                    <th>除草时间</th>
                                                    <th>除草负责人</th>
                                                </tr></thead>
                                                <tbody>
                                                <tr>
                                                    <td>2017-05-05 14:16:14</td>
                                                    <td>鲁昆齐</td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="list_box_down">
                                            <div class="image-list">
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/0.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/1.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>
                                                <div class="cover">
                                                    <div class="cover_img">
                                                        <img src="/product/img/2.png" alt="">
                                                    </div>
                                                    <p>11111</p>
                                                </div>


                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div id="tab3" class="tab-pane ">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">存储仓库</h4>
                                    <p class="category">Here is a subtitle for this table</p>
                                </div>
                                <div class="content table-responsive table-full-width">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th>仓库名称</th>
                                            <th>地点</th>
                                            <th>时间</th>
                                            <th>负责人</th>

                                        </tr></thead>
                                        <tbody>
                                        <tr >
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>饶河县中顺农业开发股份有限公司</td>
                                            <td>鲁昆齐</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>
                        <div id="tab4" class="tab-pane">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">加工过程</h4>
                                    <p class="category">Here is a subtitle for this table</p>
                                </div>
                                <div class="content table-responsive table-full-width">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <tr>

                                            <th>项目</th>
                                            <th>时间</th>
                                            <th>负责人</th>

                                        </tr></thead>
                                        <tbody>
                                        <tr >
                                            <td>加工</td>
                                            <td>高海龙</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>包装</td>
                                            <td>高海龙</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>入库</td>
                                            <td>高海龙</td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        <tr>
                                            <td>检验</td>
                                            <td>北京华测北方检测技术有限公司/td>
                                            <td>2017-05-05 14:16:14</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                        <div id="tab5" class="tab-pane">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">销售过程</h4>
                                    <p class="category">Here is a subtitle for this table</p>
                                </div>
                                <div class="content table-responsive table-full-width">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <tr>

                                            <th>入商场时间</th>
                                            <th>经销商</th>
                                            <th>负责人</th>

                                        </tr></thead>
                                        <tbody>
                                        <tr >
                                            <td>2018-01-29 08:36:32</td>
                                            <td>饶河县乐佰客综合商店</td>
                                            <td>张玲丽</td>
                                        </tr>
                                        <tr>
                                            <td>2018-01-29 08:36:32</td>
                                            <td>饶河县乐佰客综合商店</td>
                                            <td>张玲丽</td>
                                        </tr>
                                        <tr>
                                            <td>2018-01-29 08:36:32</td>
                                            <td>饶河县乐佰客综合商店</td>
                                            <td>张玲丽</td>
                                        </tr>
                                        <tr>
                                            <td>2018-01-29 08:36:32</td>
                                            <td>饶河县乐佰客综合商店</td>
                                            <td>张玲丽</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!--   Core JS Files   -->
<script src="/product/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/product/js/bootstrap.min.js" type="text/javascript"></script>

<!--  Checkbox, Radio & Switch Plugins -->
<script src="/product/js/bootstrap-checkbox-radio-switch.js"></script>

<!--  Charts Plugin -->
<script src="/product/js/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="/product/js/bootstrap-notify.js"></script>

<!--  Google Maps Plugin    -->
<!---<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>--->

<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="/product/js/light-bootstrap-dashboard.js"></script>

<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="/product/js/demo.js"></script>

<script type="text/javascript">
    /*$(document).ready(function(){

        demo.initChartist();

        $.notify({
            icon: 'pe-7s-user',
            message: "你好！<b>欢迎使用溯源查询系统</b>"

        },{
            type: 'info',
            timer: 4000
        });

    });*/
</script>



<!--图片轮播 点击放大js-->
<script type="text/javascript" src="/product/js/pictureViewer.js"></script>
<script type="text/javascript" src="/product/js/jquery.mousewheel.min.js"></script>
<script>
    $(function(){
        var productId = "${id !''}";
        $.ajax({
            async : false,
            cache:false,
            type: 'POST',
            data:{productId:productId},
            dataType : "json",
            url:"/Information/getChains",
            error: function () {
                alert('请求数据失败！');
            },
            success:function(data){
                if (data == null || data == "") {
                    alert("该溯源码无效！");
                } else {
                    $.each(data, function (i, item) {
                        var menu = "";
                        if (i == 0) {
                            menu = "<li class=\"active\"><a data-toggle=\"tab\" href=\"#tab" + item.id + "\">" + item.linkName + "</a></li>";
                        } else {
                            menu = "<li class=\"\"><a data-toggle=\"tab\" href=\"#tab" + item.id + "\">" + item.linkName + "</a></li>";
                        }
                        $("#menubar").append(menu);

                        var content = "";
                        if (i == 0) {
                            content += "<div id=\"tab" + item.id + "\" class=\"tab-pane active clearfix\">";
                        } else {
                            content += "<div id=\"tab" + item.id + "\" class=\"tab-pane\">";
                        }
                        content += "<div class=\"card\">";
                        content += "<div class=\"content table-responsive table-full-width\">";

                        $.each(item.processList, function (i, item) {
                            content += "<div class=\"list_box\">";
                            content += "<h1 class=\"h1_style\">"+item.processName+"</h1>";

                            content += "<div class=list_box_title\">";
                            content += "<table class=\"table table-hover table-striped\">";
                            content += "<thead>";
                            content += "<tr>";
                            /*$.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    if (item.productIndex.collectionType != "图片" && item.productIndex.collectionType != "视频") {
                                        console.log("+++++++++++++++++++++++++++++");
                                        console.log(item);
                                        console.log(item.productIndex);
                                        console.log(item.productIndex.indexValue);
                                        console.log("+++++++++++++++++++++++++++++");
                                        content += "<th>"+item.productIndex.indexValue+"</th>";
                                    }
                                }
                            });*/
                            $.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    if (item.collectionType != "图片" && item.collectionType != "视频") {
                                        content += "<th>"+item.indexName+"</th>";
                                    }
                                }
                            });
                            content += "</tr>";
                            content += "</thead>";
                            content += "<tbody>";
                            content += "<tr>";
                            /*$.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    if (item.productIndex.collectionType != "图片" && item.productIndex.collectionType != "视频") {
                                        content += "<td>"+item.productIndex.collectionValue+"</td>";
                                    }
                                }
                            });*/
                            $.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    if (item.collectionType != "图片" && item.collectionType != "视频") {
                                        content += "<td>"+item.productIndex.collectionValue+"</td>";
                                    }
                                }
                            });
                            content += "</tr>";
                            content += "</tbody>";
                            content += "</table>";
                            content += "</div>";

                            content += "<div class=\"list_box_down\">";
                            content += "<div class=\"image-list\">";
                            console.log(item.indexList);
                            /*$.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    var p = item.productIndex.indexValue;
                                    if (item.productIndex.collectionType == "图片") {
                                        $.each(item.productIndex.fileEntityList, function (i, item) {
                                            content += "<div class=\"cover\">";
                                            content += "<div class=\"cover_img\">";

                                            content += "<img style=\"margin-left: 5px\" src=\"\\" + item.urlsPath + "\" alt=\"\">";

                                            content += "</div>";
                                            content += "<p>"+p+"</p>";
                                            content += "</div>";
                                            //console.log(item);
                                        });
                                    }
                                }
                            });*/
                            $.each(item.indexList, function (i, item) {
                                if (item.productIndex != null) {
                                    var p = item.productIndex.indexValue;
                                    if (item.collectionType == "图片") {
                                        $.each(item.productIndex.fileEntityList, function (i, item) {
                                            content += "<div class=\"cover\">";
                                            content += "<div class=\"cover_img\">";

                                            content += "<img style=\"margin-left: 5px\" src=\"\\" + item.urlsPath + "\" alt=\"\">";

                                            content += "</div>";
                                            content += "<p>"+p+"</p>";
                                            content += "</div>";
                                            //console.log(item);
                                        });
                                    }
                                }
                            });

                            content += "</div>";
                            content += "</div>";

                            content += "</div>";
                            //console.log(item);
                        });
                        content += "</div>";
                        content += "</div>";
                        content += "</div>";
                        $("#contentelement").append(content);
                        //console.log(item);
                    });
                }
            }
        });
    });
</script>
<script>
    $(function () {
        $('.image-list').on('click', '.cover_img', function () {
            var this_ = $(this);
            var images = this_.parents('.image-list').find('.cover_img');
            var imagesArr = new Array();
            $.each(images, function (i, image) {
                imagesArr.push($(image).children('img').attr('src'));
            });
            $.pictureViewer({
                images: imagesArr, //需要查看的图片，数据类型为数组
                initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
            });
        });
    });
</script>
</html>
